<template>
  <div class="bigbox">
    <div class="head">科室选择</div>
    <a href="" class="department" v-for="(item, key) in departmentlist" :key="key" @click.prevent="router.push({path: '/doctor_choose' , query: {id: item.id}})">
      <div class="departmentname" style="text-align: center; font-size: 20px; font-weight: bold; margin-top: 57px;">{{ item.name }}</div>
    </a>
  </div>
  
  <el-button type="primary" @click="router.push('/homepage')">返回主页</el-button>
</template>

<style scoped>
  html, body{
    background-color: #f0f0f0;
  }
  .bigbox{
    width: 760px;
    height: 600px;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    border: 0px;
    margin: 0 auto;
  }
  .head{
    width: 760px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .department{
    width: 240px;
    height: 150px;
    background-color: #fafafa;
    margin: 5px;
    text-decoration: none;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let departmentlist = ref([])

  const getdepartmentlist=()=>{
    axios.get(`http://127.0.0.1:8000/disease/department/`)
    .then(res=>{
      console.log(res)
      departmentlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    getdepartmentlist()
  })

</script>
